<template>
  <div class="data-list">
    <a-table
      :class="{ noJumper: paginationOpt.pageSize >= paginationOpt.total }"
      :loading="loading"
      @change="handleTableChange"
      v-bind="tableOptions"
      :pagination="paginationOpt"
    >
      <a slot="name" slot-scope="text">hh</a>
      <span slot="customTitle"> />Name </span>
      <span slot="tags">
        <a-tag color="loser">zz</a-tag>
      </span>
      <span slot="action" slot-scope="text, record">
        <a>xxxx</a>
      </span>
    </a-table>
  </div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent } from "vue";
import {} from "@ant-design/icons-vue";

export default defineComponent({
  name: "data-list",
  props: {
    tableOptions: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    let paginationOpt = {
      current: 1,
      pageSize: 10,
      total: 0,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "30"],
      showQuickJumper: true,
    };
    const state = reactive({
      paginationOpt,
      loading: false,
    });
    let handleTableChange = function () {};
    // 页面加载时
    onMounted(() => {});
    return {
      ...toRefs(state),
      handleTableChange,
    };
  },
});
</script>
